<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../static/plugins/layui/css/formSelects-v4.css">

</head>
<style>
    .ok-body {
        padding: 10px
    }
</style>

<body>
<div class="ok-body">

    <blockquote class="layui-elem-quote layui-text">
        故障信息详情
    </blockquote>

    <form class="layui-form layui-form-pane" action="">
        <input type="hidden" name="id" id="id" th:value="${id}">

        <div class="layui-form-item">
            <label class="layui-form-label">设备编号</label>
            <div class="layui-input-inline">
                <select name="deviceId" id="device" disabled lay-verify="required" lay-filter="deviceId">
                    <option value="">选择设备编号</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">故障现象</label>
                <div class="layui-input-block">
                    <input type="text" name="symptom" readonly class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">原因分析</label>
                <div class="layui-input-block">
                    <input type="text" name="reason" readonly lay-verify="required" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label" style="font-size: small;">故障发生时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="faultTime" id="faultTime" readonly class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label" style="font-size: small;">故障解决时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="solveTime" id="solveTime" readonly class="layui-input">
                </div>
            </div>

        </div>

        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label" style="font-size: small;">故障时长</label>
                <div class="layui-input-inline">
                    <input type="text" name="duration" id="duration" readonly
                           class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label" style="font-size: small;">停机时长</label>
                <div class="layui-input-inline">
                    <input type="text" name="stopDuration" id="stopDuration" readonly class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">分钟</div>
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">故障详情</label>

            <div id="faultDetail" class="faultDetails">

                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="partId" disabled index="0" lay-filter="partId">
                            <option value="">发生故障部位</option>
                            <option value="1">机械部位</option>
                            <option value="2">电气部位</option>
                            <option value="3">液压部位</option>
                            <option value="4">气压部位</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline componentDiv">
                    <div class="layui-input-inline" style="width: 300px;">
                        <select name="changeComponent" disabled class="changeComponent" xm-select="changeComponent0"
                                xm-select-show-count="4" xm-select-skin="normal"
                                lay-filter="changeComponent">
                            <option value=''>更换配件</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="font-size: small;">主维修人员</label>
            <div class="layui-input-inline">
                <select id="masterSolver" disabled name="masterSolver" lay-verify="required" lay-filter="masterSolver">
                    <option value=""></option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="font-size: smaller;">辅助维修人员</label>
            <div class="layui-input-inline" style="width: 600px">
                <select name="solver" disabled lay-verify="required" xm-select="solver" xm-select-skin="normal"
                        lay-filter="solver">
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">关键词</label>
            <div class="layui-input-inline" style="width: 600px">
                <select name="keyWordId" disabled xm-select="keyWord" xm-select-skin="normal"
                        lay-filter="keyWordId">
                    <option value=''>绑定关键词</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">排除过程</label>
            <div class="layui-input-block" style="width: 600px">
                <textarea name="resolvent" readonly class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px;" pane>
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <input type="checkbox" checked="" name="status" lay-skin="switch" value="1" lay-filter="switchTest"
                       lay-text="启用|禁用">
            </div>
        </div>

    </form>

</div>

<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/js/jquery-3.2.1.min.js"></script>
<script src="../static/js/jquery.base64.js"></script>
<script src="../static/js/device.js"></script>

<script th:inline="none">
    //全局定义一次, 加载formSelects
    layui.config({
        base: '../static/plugins/layui/lay/modules/' //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        formSelects: 'formSelects-v4'
    });
    layui.use(['form', 'formSelects', 'util'], function () {
        var form = layui.form;
        var formSelects = layui.formSelects;
        var util = layui.util;
        var tableName = 'faultInfo';
        var id = $('#id').val();

        formSelects.disabled();
        var param = 'current=1&pageSize=2&searchCol=id&searchValue=' + id;
        JJZ.requestTableData(tableName, param, function (data) {
            var result = data.records[0];

            //初始化设备编号下拉框
            JJZ.initSelectShowField(JJZ.named('deviceId'), '/device/dataGrid', 'number', function (noError) {
                if (noError) {
                    JJZ.named('deviceId').find('option').each(function (index, elem) {
                        $(elem).val() == result.deviceId ? $(elem).attr("selected", "selected") : '';
                    });
                    form.render();
                }
            });

            //初始化主维修人员
            JJZ.initSelectShowField(JJZ.named('masterSolver'), '/user/dataGrid', 'username', function (noError) {
                if (noError) {
                    JJZ.named('masterSolver').find('option').each(function (index, elem) {
                        $(elem).val() == result.masterSolver ? $(elem).attr("selected", "selected") : '';
                    });
                    form.render();
                }
            });

            // //初始化辅助维修人员下拉框
            JJZ.initMultipleSelect(formSelects, 'solver', '/user/dataGrid', 'username', function (noError) {
                if (result['solver']) {
                    var strs = new Array(); //定义一数组
                    strs = result['solver'].split(","); //字符分割
                    formSelects.value('solver', strs);
                }
            });

            //初始化关键词下拉框
            JJZ.initMultipleSelect(formSelects, 'keyWord', '/keyWord/dataGrid', 'name', function (noError) {
                if (result['keyWordId']) {
                    var strs = new Array(); //定义一数组
                    strs = result['keyWordId'].split(","); //字符分割
                    formSelects.value('keyWord', strs);
                }
            });

            var faultContent = JSON.parse(result.faultContent);
            var modelId = result.modelId;
            //这里初始化了所有的额设备型号，设备部位的下拉
            initFaultPart(faultContent);
            //这里初始化了所有零件多选下拉框
            renderSelectComponent(faultContent, modelId);

            JJZ.named('symptom').val(result.symptom);
            JJZ.named('duration').val(result.duration);
            JJZ.named('reason').val(result.reason);
            JJZ.named('stopDuration').val(result.stopDuration);
            JJZ.named('faultTime').val(JJZ.FormatDate(result.faultTime, 'yyyy-MM-dd hh:mm'));
            JJZ.named('solveTime').val(JJZ.FormatDate(result.solveTime, 'yyyy-MM-dd hh:mm'));
            JJZ.named('resolvent').val(result.resolvent);
            result.status == 1 ? '' : JJZ.named('status').removeAttr("checked");
        });


        //用于初始化编辑时的故障部位信息
        function initFaultPart(faultContentList) {
            var length = faultContentList.length;
            //先动态添加完成html
            for (var index = 1; index < length; index++) {
                var faultPartDiv = $('#faultDetail').clone();
                $(faultPartDiv).removeAttr("id");
                $(faultPartDiv).prepend('<label class="layui-form-label" style="border: none;"></label>');
                $(faultPartDiv).find('select[name="partId"] option:selected').removeAttr('selected');
                $(faultPartDiv).find('select[name="partId"]').attr('index', index);
                $(faultPartDiv).find('div.layui-inline.componentDiv').empty();
                var html = '<div class="layui-input-inline" style="width: 300px;">' +
                    '        <select name="changeComponent" class="changeComponent" disabled xm-select="changeComponent' + index + '" xm-select-show-count="4" xm-select-skin="normal" lay-filter="changeComponent">' +
                    '         </select>' +
                    '      </div>';
                $(faultPartDiv).find('div.layui-inline.componentDiv').append(html);
                $('div.faultDetails:last').after(faultPartDiv);
            }

            //初始化设备部位下拉框
            JJZ.named('partId').find('option').each(function (index, elem) {
                var tempElem = elem.outerHTML;
                if (index != 0) {
                    for (var partIndex = 1; partIndex < length; partIndex++) {
                        if ($(tempElem).val() == faultContentList[partIndex].faultPartId) {
                            var selectedOption = '<option value="' + $(tempElem).val() + '" selected="selected">' + $(tempElem).text() + '</option>';
                            $('div.faultDetails').eq(partIndex).find('select[name="partId"]').append(selectedOption);
                        } else {
                            $('div.faultDetails').eq(partIndex).find('select[name="partId"]').append(tempElem);
                        }
                    }
                }
                $(elem).val() == faultContentList[0].faultPartId ? $(elem).attr("selected", "selected") : '';
            });
            // formSelects.render();
            form.render();
        }

        var allComponents = [];

        //用于初始化编辑是的故障部位信息的配件多选下拉框(必须通过循环调用该方法才能正确)
        function renderSelectComponent(faultContentList, modelId) {
            JJZ.initMultipleSelectReturnData(formSelects, 'changeComponent0', '/component/dataGridByModelId', 'modelId=' + modelId, 'name', function (datas) {
                if (datas && datas.length > 0) {
                    allComponents = datas;
                    for (var index in faultContentList) {
                        var content = faultContentList[index];
                        var components = content.changeComponent;
                        if (index > 0) {
                            formSelects.data('changeComponent' + index, 'local', {
                                arr: allComponents
                            });
                        }
                        var selected = [];
                        for (var xxx in components) {
                            selected.push(components[xxx].componentId);
                        }
                        formSelects.value('changeComponent' + index, selected);
                    }
                }
            });
            formSelects.render();
        }
    });

    String.prototype.format = function (args) {
        var result = this;
        if (arguments.length > 0) {
            if (arguments.length == 1 && typeof (args) == "object") {
                for (var key in args) {
                    if (args[key] != undefined) {
                        var reg = new RegExp("({" + key + "})", "g");
                        result = result.replace(reg, args[key]);
                    }
                }
            }
            else {
                for (var i = 0; i < arguments.length; i++) {
                    if (arguments[i] != undefined) {
                        //var reg = new RegExp("({[" + i + "]})", "g");//这个在索引大于9时会有问题，谢谢何以笙箫的指出
                        var reg = new RegExp("({)" + i + "(})", "g");
                        result = result.replace(reg, arguments[i]);
                    }
                }
            }
        }
        return result;
    }
    String.format = function () {
        if (arguments.length == 0)
            return null;

        var str = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
            str = str.replace(re, arguments[i]);
        }
        return str;
    }
</script>
</body>
</html>